<template>
	<view class="reg_wrap">
		<view class="uni-form-item">
			<view class="title"><text>*</text>昵称</view>
			<input class="uni-input" type="text" v-model="registerParams.nickname" placeholder="由4-30位数字、字母、汉字等组成" />
		</view>
		<view class="uni-form-item">
			<view class="title"><text>*</text>手机号</view>
			<input class="uni-input" type="number" v-model="registerParams.phone" placeholder="请输入手机号" @blur="validPhone" />
		</view>
		<view class="uni-form-item">
			<view class="title"><text>*</text>密码</view>
			<input class="uni-input" type="password" v-model="registerParams.password" placeholder="由6-16位数字、字母、下划线组成" />
		</view>
		<view class="uni-form-item">
			<view class="title"><text>*</text>确认密码</view>
			<input class="uni-input" type="password" v-model="registerParams.password2" placeholder="请输入确认密码" />
		</view>
		<view class="uni-btn-v">
			<button class="submit_btn" @click="submit">注册</button>
		</view>
	</view>
</template>

<script>
	import { api_H5ValidPhone,api_getShopname,api_H5BrowserRegister } from '@/api/api'
	export default {
		data() {
			return {				
				registerParams: {
					nickname: '',
					phone: '',
					password: '',
					password2: '' 
				},
				rules: {
					nickname: { reg: /^[a-zA-Z0-9@.-_\U4e00-\u9fa5]{4,30}/,name: 'nickname',label: '昵称',msg: '昵称格式有误' },
					phone: { reg: /^1[3-9]\d{9}$/,name: 'phone',label: '手机号',msg: '手机号不合法' },
					password: { reg: /\w{6,16}/,name: 'password',label: '密码',msg: '密码不正确' },
					password2: { reg: /\w{8,16}/,name: 'password2',label: '确认密码',msg: '两次密码不一致' }
				},
			}
		},
		created(){

		},
		methods: {
			validPhone(){	// 验证手机号是否能注册
				if (this.registerParams.phone && this.registerParams.phone.length == 11) {
					api_H5ValidPhone({phone: this.registerParams.phone}).then(res => {
						uni.showToast({title: res.data.msg,icon: res.data.code == 1 ?'success' : 'error'});
					}).catch(err => console.log(err))
				}				
			},
			GetShopName(){	// 获取店铺名称
				api_getShopname().then(res => {
					if (res.code == 1) {
						uni.setStorageSync('company_name',res.data.shopname);
					} else {
						uni.showToast({ title: res.msg,icon: 'error' });
					}
				}).catch(err => console.log(err));
			},
			submit(){	// h5 -- 提交	
				let bool = this.validField(this.registerParams,this.rules);
				if (bool) {					
					this.validPhone();
					api_H5BrowserRegister(this.registerParams).then(res => {
						uni.showToast({title: res.msg,icon: res.code == 1 ? 'success' : 'error'});
						if (res.code == 1) {
							this.GetShopName();
							uni.navigateBack(-1);							
						} 
					}).catch(err => console.log(err));
				}
			},
			validField(obj,reg){	// 验证表单相关字段值
				let keys = Object.keys(obj);
				let initNum = 0;
				function recur(arr, i) {
				    let n = arr[i];				
				    if (obj[n].length > 0) {
				        if (n !== 'againPassword' && !reg[n]['reg'].test(obj[n])) {
				            uni.showToast({ title: reg[n]['msg'],icon: 'error' });
				            return false;
				        }							
						if (n == 'againPassword' && obj.againPassword !== obj.password) {
							uni.showToast({ title: reg[n]['msg'],icon: 'error' });
							return false;
						}					
				        i++;
				        if (i < arr.length) {
				            return recur(arr, i);
				        } else {
				            return true;
				        }
				    } else {
				        uni.showToast({ title: `${reg[n].label}不能为空`,icon: 'error' });
				        return false;
				    }
				}
				return recur(keys,initNum);
			},
		}
	}
</script>

<style lang="scss" scoped>
.reg_wrap{
	padding: 10px;
	.uni-form-item{
		display: flex;
		align-items: center;
		padding: 10px 0;
		border-bottom: 1px solid #ebedf0;
		font-size: 14px;
		.title{
			width: 70px;
			font-size: 14px;
			text-align: right;
			margin: 0 10px 0 0;
			text{
				margin: 0 3px 0 0;
				color: #f00;
			}
		}	
		.uni-input{
			min-width: 220px !important;
			.uni-input-placeholder{
				font-size: 14px;
			}
		}		
	}
	.uni-btn-v{
		margin: 20px 0 0;
		button{
			font-size: 14px;
			border-radius: 30px;
			margin: 0 0 10px;
		}
		.submit_btn{
			background-color: #0e8dfe;
			color: #fff;
		}
	}
}
</style>
